<script setup lang="ts">
import {useColorMode} from "@vueuse/core";
import {themes} from '@/lib/registry/themes'
import {Button} from "@/components/ui/button";
import {Label} from "@/components/ui/label";
import {CheckIcon, Component, MonitorIcon, MoonStarIcon, SunDimIcon} from "lucide-vue-next";
import {useCustomize} from "@/composables/useCustomize";
import {watchEffect} from "vue";

const {theme, radius, setTheme, setRadius} = useCustomize()

type Color =
    | 'zinc'
    | 'slate'
    | 'stone'
    | 'gray'
    | 'neutral'
    | 'red'
    | 'rose'
    | 'orange'
    | 'green'
    | 'blue'
    | 'yellow'
    | 'violet'

const allColors: Color[] = [
  'zinc',
  'rose',
  'blue',
  'green',
  'orange',
  'red',
  'slate',
  'stone',
  'gray',
  'neutral',
  'yellow',
  'violet',
]

const RADII = [0, 0.25, 0.5, 0.75, 1]

watchEffect(() => {
  console.log('theme', theme.value)
  setClassTheme()
})

watchEffect(() => {
  console.log('radius', radius.value)
  setStyleRadius()
})

function setClassTheme() {
  document.documentElement.classList.remove(
      ...allColors.map(color => `theme-${color}`),
  )
  document.documentElement.classList.add(`theme-${theme.value}`)
}

function setStyleRadius() {
  document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
}

function backgroundColor(color: Color) {
  const bg = themes.find(theme => theme.name === color)
  return `hsl(${bg?.activeColor.light})`
}

const colorMode = useColorMode()

</script>

<template>
  <div class="grid gap-6">
    <div class="space-y-1.5">
      <Label>Color</Label>
      <div class="grid grid-cols-3 gap-2">
        <template v-for="color in allColors" :key="color">
          <Button
              class="justify-start gap-2"
              variant="outline"
              :class="{ 'border-primary border-2': theme === color }"
              @click="setTheme(color)"
          >
            <span class="h-5 w-5 flex items-center justify-center rounded-full"
                  :style="{ backgroundColor: backgroundColor(color) }">
              <Component :is="CheckIcon" v-if="theme === color" size="16" class="text-white"/>
            </span>
            <span class="text-xs capitalize">{{ color }}</span>
          </Button>
        </template>
      </div>
    </div>
    <div class="space-y-1.5">
      <Label>Radius</Label>
      <div class="grid grid-cols-5 gap-2">
        <template v-for="r in RADII" :key="r">
          <Button
              class="justify-center gap-2"
              variant="outline"
              :class="{ 'border-primary border-2': radius === r }"
              @click="setRadius(r)"
          >
            <span class="text-xs capitalize">{{ r }}</span>
          </Button>
        </template>
      </div>
    </div>
    <div class="space-y-1.5">
      <Label>Theme</Label>
      <div class="grid grid-cols-3 gap-2">
        <Button
            class="justify-center gap-2"
            variant="outline"
            :class="{ 'border-primary border-2': colorMode === 'light' }"
            @click="colorMode = 'light'"
        >
          <Component :is="SunDimIcon" size="16"/>
          <span class="text-xs capitalize">Light</span>
        </Button>
        <Button
            class="justify-center gap-2"
            variant="outline"
            :class="{ 'border-primary border-2': colorMode === 'dark' }"
            @click="colorMode = 'dark'"
        >
          <Component :is="MoonStarIcon" size="16"/>
          <span class="text-xs capitalize">Dark</span>
        </Button>
        <Button
            class="justify-center gap-2"
            variant="outline"
            :class="{ 'border-primary border-2': colorMode === 'auto' }"
            @click="colorMode = 'auto'"
        >
          <Component :is="MonitorIcon" size="16"/>
          <span class="text-xs capitalize">System</span>
        </Button>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
